{{! Latest articles (ADR 0061): a ready-made section — the section heading, the Articles element's cards (posts/template.html, the same markup and classes: "requires": ["posts"]) and an optional button to the blog page. }}
<div {{@attrs}}>{{^hidden}}{{#heading}}<div class="sv-sectionhead sv-sectionhead--{{headingAlign}}{{#headingSize}} sv-sectionhead--size-{{headingSize}}{{/headingSize}}"><h2 class="sv-sectionhead__title"{{@edit heading}}>{{{heading}}}</h2>{{#intro}}<p class="sv-sectionhead__text"{{@edit intro}}>{{intro}}</p>{{/intro}}</div>{{/heading}}{{^heading}}{{#intro}}<div class="sv-sectionhead sv-sectionhead--{{headingAlign}}{{#headingSize}} sv-sectionhead--size-{{headingSize}}{{/headingSize}}"><p class="sv-sectionhead__text"{{@edit intro}}>{{intro}}</p></div>{{/intro}}{{/heading}}<div class="sv-posts sv-posts--columns-{{columns}} sv-posts--look-{{look}}">{{#hasFilters}}<nav class="sv-posts__filters{{#filterLook}} sv-posts__filters--{{filterLook}}{{/filterLook}}" aria-label="{{filtersLabel}}">{{#filters}}<a class="sv-posts__filter" href="{{url}}"{{#current}} aria-current="page"{{/current}}>{{name}}</a>{{/filters}}</nav>{{/hasFilters}}{{#hasItems}}{{#overflow}}<div class="sv-carousel sv-carousel--nav-{{carouselNav}}" data-sv-carousel><div class="sv-carousel__track">{{/overflow}}{{^overflow}}<div class="sv-posts__grid">{{/overflow}}{{#items}}<article class="sv-service-card sv-service-card--look-{{look}}{{#shape}} sv-service-card--shape-{{shape}}{{/shape}}{{#titleSize}} sv-service-card--title-size-{{titleSize}}{{/titleSize}} sv-posts__item{{#arrowTitle}} sv-posts__item--arrow{{/arrowTitle}}{{^turns}}{{#style}} sv-card-{{style}}{{#styleCustom}} sv-card-custom{{/styleCustom}}{{/style}}{{/turns}}{{#turns}} sv-card-turns{{/turns}} sv-round-{{corners}}{{#hover}} sv-cardhover-{{hover}}{{/hover}}"{{^turns}}{{#styleCustom}} style="--sv-custom-card:{{styleCustom}}"{{/styleCustom}}{{/turns}}><div class="sv-service-card__media">{{#image.url}}<img class="sv-service-card__photo" src="{{image.url}}" alt="{{image.alt}}"{{#image.width}} width="{{image.width}}" height="{{image.height}}"{{/image.width}} loading="lazy" decoding="async">{{/image.url}}{{^image.url}}<span class="sv-posts__nophoto" aria-hidden="true"></span>{{/image.url}}</div><div class="sv-service-card__body"><p class="sv-posts__meta">{{#showCategory}}{{#category.name}}<span class="sv-posts__category">{{category.name}}</span>{{/category.name}}{{/showCategory}}{{^splitDetails}}{{#showDate}}<time class="sv-posts__date" datetime="{{dateTime}}">{{date}}</time>{{/showDate}}{{#showReadingTime}}<span class="sv-posts__time">{{readingTime}}</span>{{/showReadingTime}}{{/splitDetails}}</p><h3 class="sv-service-card__title">{{title}}</h3>{{#showExcerpt}}{{#excerpt}}<p class="sv-service-card__text">{{excerpt}}</p>{{/excerpt}}{{/showExcerpt}}{{^splitDetails}}{{#showAuthor}}{{#author}}<p class="sv-posts__author">{{author}}</p>{{/author}}{{/showAuthor}}{{/splitDetails}}{{#splitDetails}}<p class="sv-posts__meta sv-posts__meta--foot">{{#showAuthor}}{{#author}}<span class="sv-posts__by">{{author}}</span>{{/author}}{{/showAuthor}}{{#showDate}}<time class="sv-posts__date" datetime="{{dateTime}}">{{date}}</time>{{/showDate}}{{#showReadingTime}}<span class="sv-posts__time">{{readingTime}}</span>{{/showReadingTime}}</p>{{/splitDetails}}{{#moreLabel}}<span class="sv-posts__more" aria-hidden="true">{{moreLabel}}</span>{{/moreLabel}}</div>{{#tiles}}<span class="sv-image__arrow sv-service-card__arrow" aria-hidden="true"></span>{{/tiles}}<a class="sv-service-card__link" href="{{url}}"><span class="sv-service-card__sr">{{title}}</span></a></article>{{/items}}{{^overflow}}</div>{{/overflow}}{{#overflow}}</div><button type="button" class="sv-carousel__arrow sv-carousel__arrow--prev" aria-label="{{prevLabel}}"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m15 6-6 6 6 6"/></svg></button><button type="button" class="sv-carousel__arrow sv-carousel__arrow--next" aria-label="{{nextLabel}}"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m9 6 6 6-6 6"/></svg></button></div>{{/overflow}}{{#pages.show}}<nav class="sv-posts__pages" aria-label="{{pages.label}}">{{#pages.newer}}<a class="sv-posts__page sv-posts__page--newer" href="{{pages.newer}}">{{pages.newerLabel}}</a>{{/pages.newer}}<span class="sv-posts__page-count">{{pages.count}}</span>{{#pages.older}}<a class="sv-posts__page sv-posts__page--older" href="{{pages.older}}">{{pages.olderLabel}}</a>{{/pages.older}}</nav>{{/pages.show}}{{/hasItems}}{{^hasItems}}{{#ready}}{{@placeholder articles}}{{/ready}}{{^ready}}{{@placeholder loading}}{{/ready}}{{/hasItems}}</div>{{#button.label}}<div class="sv-posts__action sv-posts__action--{{headingAlign}}"><div class="sv-button sv-button--variant-outline">{{#button.link.url}}<a class="sv-button__control{{#button.arrow}} sv-button__control--arrow{{/button.arrow}}{{#button.icon}} sv-button__control--icon{{#button.iconEnd}} sv-button__control--icon-end{{/button.iconEnd}} sv-glyph-{{button.icon}}{{/button.icon}}" href="{{button.link.url}}"{{#button.link.newTab}} target="_blank" rel="noopener noreferrer"{{/button.link.newTab}}{{@edit button.label}}>{{button.label}}</a>{{/button.link.url}}{{^button.link.url}}<span class="sv-button__control{{#button.arrow}} sv-button__control--arrow{{/button.arrow}}{{#button.icon}} sv-button__control--icon{{#button.iconEnd}} sv-button__control--icon-end{{/button.iconEnd}} sv-glyph-{{button.icon}}{{/button.icon}}"{{@edit button.label}}>{{button.label}}</span>{{/button.link.url}}</div></div>{{/button.label}}{{/hidden}}</div>